/*
Theme Name: Ueberdesign
Author:
Author URI:
Description: Theme for Gaby
Version: 0.4
*/


/* RESET */

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,
video {	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* END RESET */


/* Basics, Fonts, Colors */

html { font-size: 16px; }
body { line-height: 1.3em; font-family: Dosis, Arial, sans; color: #444; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }
.doubleline { border-top: 1px solid black; height: 2px; border-bottom: 1px solid black; }


/* Header */
#page-header { position: fixed; max-width: 1075px; top: 0; left: 0; right: 0; margin: auto; background: white; z-index: 3; }
body.admin-bar #page-header { top: 28px; }
#page-header #site-title { margin: 25px 0 10px 0; text-align: center; }
#page-header #site-title img { max-width: 100%; }
#page-header .doubleline { margin: 0 2.3255814% 2px 2.3255814%; }


/* Framework */
#page { max-width: 1075px; margin: 125px auto 0; overflow: hidden; }
#page-inner { margin: 0 2.3255814%; }
#main { margin-bottom: 25px; }



/* Navigation */
nav { padding: 25px 0; overflow: hidden; }
nav ul { text-align: center; }
nav ul li { display: inline; }
nav ul li:after { content: '///'; margin: 0 6px 0 8px; }
nav ul li:last-child:after { content: ''; margin: 0; }



/* Home */
.content-home { overflow: hidden; }
.content-home a { float: left; position: relative; width: 48.7804878%; margin-right: 2.4390244%; margin-bottom: 2.4390244%; }
.content-home a:nth-child(2n) { margin-right: 0; }
.content-home a img { width: 100%; display: block; }
.content-home a .imgcaption { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); color: white; text-align: center; font-size: 18px; line-height: 1.5em; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.content-home a .imgcaption h2 { font-weight: bold; margin-top: 25%; }
.content-home a:hover .imgcaption { opacity: 1; }



/* Content */
.content-single img { max-width: 100%; height: auto; }
.content-single img.size-medium { width: 48.7804878%; }

.content-single img.alignnone { margin-bottom: 2.4390244%; }
.content-single img.alignleft { float: left; margin-right: 2.4390244%; margin-bottom: 2.4390244%;; }
.content-single strong { font-weight: bold; }

.hugemarginbox { margin: 0 25.7560976%; position: relative; }
.hugemarginbox p { margin-bottom: 1em; }
.hugemarginbox .sharebox { position: absolute; top: 0; right: -150px; width: 100px; }

.smallmarginbox { margin: 0 13.4146341%; }

.standard-page p { margin-bottom: 1em; }


/* Footer */
footer { margin: 10px 30px 25px 30px; overflow: hidden; }
ul.footer-left { float: left; width: 49%; }
ul.footer-right { float: right; width: 49%; text-align: right; }



/* ======================
* Small Screen Exceptions
* ======================= */




@media screen and (max-width: 560px) {
    .hugemarginbox { margin: 0; }
    .hugemarginbox .sharebox { position: static; margin-bottom: 1em;  }
}




@media screen and (max-width: 420px) {

    /* Home */
    .content-home a { width: 100%; margin-right: 0; }

    /* Footer */
    footer { margin: 10px 0 25px 0; }
    ul.footer-left { width: 100%; float: none; }
    ul.footer-right { width: 100%; float: none; text-align: left; }

    /* Content */
    .content-single img.alignleft { width: 100%; float: none; }
    .content-single img.size-medium { width: 100%; }

    /* SmallMarginBox sould not have a margin any longer */
    .smallmarginbox { margin: 0; }
}